<template>
	<view>
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed>
			我的收藏
		</tn-nav-bar>
		<view :style="{paddingTop: vuex_custom_bar_height +45+ 'px'}" class="search-conten">
			<view class="add-collect" :style="'top:'+ vuex_custom_bar_height+ 'px'">
				<view class="favorites-box" style="background: #eeeeee;">
					<view class="favorites-name">
						<!-- <span style="font-size: 36rpx;margin-right: 10rpx;"><text class="tn-icon-add"></text> </span> -->
						<span style="font-weight: bold;margin-right: 10rpx;">{{name}}</span>
						<span style="font-size: 26rpx;">作品{{content.length}}</span>
						
					</view>
					<view class="collect-switch" @click="operationEdit"> <span
							style="font-size: 34rpx;margin-right: 10rpx;"><text
								class="tn-icon-edit"></text></span>{{isEdit?'取消':'管理'}}</view>
				</view>
				<view class="operation" v-if="operationflag">
					<view class="operation-list" @click="addCollect">添加作品</view>
					<view class="operation-list" @click="allOperation">批量管理</view>
					<view class="operation-list" @click="showEdit=true">修改名称</view>
					<view class="operation-list" @click="showDelete=true">删除收藏夹</view>
				</view>
			</view>
			<view class="collect-list-box">
				<collect-list ref="contentList" :dataList='content' @refreshContent="refresh" :canSwipe="true"
					:swipeOptions="swipeOptions" :edit="isEdit"></collect-list>
			</view>
			<view class="operation-bottom" v-if="isEdit">
				<tn-checkbox-group @change="radioGroupChange">
					<tn-checkbox v-model="selectAll">全选</tn-checkbox>
				</tn-checkbox-group>
				<view style="flex:1">| 已选{{selectCount}}篇</view>
				<view class="operation-btnl" @click="showMoveTo=true">移动到</view>
				<view class="operation-btnr" @click="showRemove=true">移除</view>
			</view>
			<tn-load-more class="load-more" :status="loadStatus" loadingIconType="flower"></tn-load-more>
			<tn-empty style="position: fixed;left: 50%; transform: translateX(-50%);top:40%" mode="list"
				v-if="content.length == 0"></tn-empty>
			<tn-modal v-model="showEdit" :custom="true">
				<view class="custom-modal-content">
					<!-- <view class="tn-icon tn-icon-about-fill">修改文件夹名称</view> -->
					<view style="display: flex;align-items: center;">
						<view style="width: 250rpx;">新文件夹名：</view><input class="edit-name"
							v-model="collectName"></input>
					</view>
					<view class="edit-submit" @click="editFileName">保存</view>
				</view>
			</tn-modal>
			<tn-modal v-model="showDelete" title="温馨提示" content="确定删除吗？删除后收藏夹下的作品仍将保留在我的收藏中" :button="deleteButton"
				@click="clickDelete"></tn-modal>
			<tn-popup v-model="showMoveTo" mode="bottom" length="30%">
				<view class="move-top">
					<view class="closeMove" @click="showMoveTo=false"><text class="tn-icon-close-circle"></text></view>
					<view class="move-content">收藏夹</view>
					<view class="moveAdd" @click="showAddFolder=true">+新建</view>
				</view>
				<tn-list-cell v-for="(item,index) in foldersList" :key="index" @click="moveContent(item.id)"><span
						style="font-size: 36rpx;margin-right: 10rpx;"><text class="tn-icon-folder"></text>
					</span>{{item.name}}
				</tn-list-cell>
			</tn-popup>
			<tn-modal v-model="showAddFolder" :custom="true">
				<view class="custom-modal-content">
					<!-- <view class="tn-icon tn-icon-about-fill">修改文件夹名称</view> -->
					<view style="display: flex;align-items: center;">
						<view style="width: 250rpx;">文件夹名：</view><input class="edit-name" v-model="collectName"></input>
					</view>
					<view class="edit-submit" @click="nameAddMove">新增</view>
				</view>
			</tn-modal>
			<tn-popup v-model="showRemove" mode="bottom" length="300">
				<view class="move-top">
					<view class="move-content" style="color: #9b9b9b">将作品从此专辑移除或取消收藏？</view>
					<view class="moveAdd" @click="showRemove=false">取消</view>
				</view>
				<tn-list-cell style="text-align: center;height: 50rpx;" @click="deleteContent">仅从收藏夹中移除</tn-list-cell>
				<tn-list-cell style="text-align: center;height: 50rpx;" @click="cancelCollect">取消收藏</tn-list-cell>
			</tn-popup>
		</view>
	</view>
</template>

<script>
	import {
		getCollectByUser,
		batchDelete,
		editFlie,
		deleteFlie,
		displace,
		displaceForDeafult,
		getCollectionFoldersInfoByUser,
		saveCollectionFolders
	} from '@/util/index.js'
	export default {
		data() {
			return {
				id: '',
				name:'',
				title: '',
				page: 1,
				limit: 20,
				content: [],
				loadStatus: 'loading', // 加载状态：more|loading|noMore
				swipeOptions: [{
					name: '取消收藏',
					action: 'del',
					style: {
						bgColor: '#FFA726',
						width: '150rpx'
					}
				}],
				type: 'collect',
				list: [{
					tabName: '作品'
				}, {
					tabName: '收藏夹'
				}],
				current: 0,
				isEdit: false,
				operationflag: false,
				selectAll: false,
				showEdit: false,
				collectName: '',
				showDelete: false,
				deleteButton: [{
						text: '取消',
						backgroundColor: '#E6E6E6',
						fontColor: '#000000',
						plain: true,
						shape: 'round'
					},
					{
						text: '确定',
						backgroundColor: 'tn-bg-indigo',
						fontColor: '#FFFFFF'
					}
				],
				showMoveTo: false,
				showAddFolder: false,
				showRemove: false,
				selectCount: 0,
				contentsVOList: [],
				foldersList: [],
			};
		},
		onLoad(option) {
			this.id = option.id
			this.name = option.name
			this.getList()
			this.getFoldersList()
			uni.$on('refreshData', this.getList);
		},
		onShow() {

		},
		onUnload() {
			uni.$off('refreshData')
		},
		methods: {
			change(index) {
				this.current = index;
			},
			getList() {
				this.operationflag = false
				getCollectByUser({
					page: 1,
					limit: 1000,
					selectType: '1',
					folderId: this.id
				}).then((res) => {
					res.list.forEach((item) => {
						item.checked = false
					})
					this.content = res.list
					this.loadStatus = 'noMore'
					// this.content = this.content.concat(res.list)
					// if (this.content.length < res.total) {
					// 	this.loadStatus = 'loading'
					// } else {
					// 	this.loadStatus = 'noMore'
					// }
					// uni.stopPullDownRefresh();
				}).catch(() => {
					// uni.stopPullDownRefresh();
				})
			},
			refresh(e) {
				if (e.length) {
					this.content = e
					let num = 0
					let list = []
					e.forEach(item => {
						if (item.checked) {
							num++;
							list.push({
								id: item.id,
								type:item.type
							})
						}
					})
					this.contentsVOList = list
					this.selectCount = num
				} else {
					this.page = 1
					this.content = []
					this.getList()
				}
			},
			allOperation() {
				this.isEdit = !this.isEdit
				this.operationflag = false
			},
			operationEdit() {
				if (this.isEdit) {
					this.isEdit = false
					return
				}
				this.operationflag = !this.operationflag

			},
			radioGroupChange() {
				this.selectAll = !this.selectAll
				let list = []
				if (this.selectAll) {
					this.content.forEach((item) => {
						item.checked = true
						list.push({
							id: item.id,
							type:item.type
						})
					})
					this.selectCount = this.content.length
				} else {
					this.content.forEach((item) => {
						item.checked = false
					})
					this.selectCount = 0
					list = []
				}
				this.contentsVOList = list
			},
			addCollect() {
				uni.navigateTo({
					url: `../add-collect/add-collect?id=${this.id}`
				})
			},
			nameEdit() {
				this.showEdit = false
			},
			clickDelete(e) {
				console.log(e)
				if (e.index === 1) {
					deleteFlie({
						id: this.id,
						valiFlag: 0
					}).then((res) => {
						uni.showToast({
							title: '文件夹已删除！',
							icon: 'none'
						})
						uni.navigateBack()
						this.close()
					})
				} else {
					this.showDelete = false
				}
			},
			deleteContent() { //移除文件夹
				displaceForDeafult({
					oldFoldersId: this.id,
					contentsVOList: this.contentsVOList
				}).then((res) => {
					uni.showToast({
						title: '移除成功！',
						icon: 'none'
					})
					this.close()
				})
			},
			cancelCollect() { //取消收藏
				batchDelete({
					collectionFoldersId: this.id,
					contentsVOList: this.contentsVOList
				}).then((res) => {
					uni.showToast({
						title: '已取消收藏！',
						icon: 'none'
					})
					this.close()
				})
			},
			getFoldersList() { //获取收藏夹列表
				getCollectionFoldersInfoByUser().then((res) => {
					this.foldersList = res
				})
			},
			moveContent(id) { //文件移动
				displace({
					oldFoldersId: this.id,
					contentsVOList: this.contentsVOList,
					newFoldersId: id
				}).then((res) => {
					uni.showToast({
						title: '内容已成功移动至新文件夹！',
						icon: 'none'
					})
					this.close()
				})
			},
			nameAddMove() { //文件夹新建并移动
				if (!this.collectName) {
					uni.showToast({
						title: '请先输入新文件夹名！',
						icon: 'none'
					})
					return
				}
				saveCollectionFolders({
					name: this.collectName,
					contentsVOList: this.contentsVOList,
				}).then((res) => {
					uni.showToast({
						title: '内容已成功移动至新文件夹！',
						icon: 'none'
					})
					this.getFoldersList()
					this.close()
				})
			},
			editFileName() { //文件改名
				if (!this.collectName) {
					uni.showToast({
						title: '请先输入新文件夹名！',
						icon: 'none'
					})
					return
				}
				editFlie({
					id: this.id,
					name: this.collectName,
				}).then((res) => {
					uni.showToast({
						title: '文件夹名称已修改！',
						icon: 'none'
					})
					this.name = this.collectName
					this.getFoldersList()
					this.close()
				})
			},
			close() {
				this.showRemove = false
				this.isEdit = false
				this.operationflag = false
				this.showAddFolder = false
				this.showMoveTo = false
				this.selectAll = false
				this.contentsVOList = []
				this.selectCount = 0
				this.collectName = ''
				this.showDelete = false
				this.showEdit = false
				this.page = 1
				this.content = []
				this.getList()
			}

		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.content = []
			this.getList()
		},
		//上拉加载更多
		onReachBottom() {
			if (this.loadStatus == 'noMore') return
			this.page++;
			this.getList();
		},

	}
</script>

<style lang="less">
	.search-conten {
		min-height: 100vh;
	}

	.load-more {
		padding: 20rpx;
	}

	.favorites-box {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;

		.favorites-name {
			font-size: 28rpx;
			color: #333333;
			height: 80rpx;
			line-height: 80rpx;
		}

		.collect-switch {
			font-size: 28rpx;
			color: #333333;
			height: 80rpx;
			line-height: 80rpx;
		}
	}

	.collect-list-box {
		width: 100%;
		// padding: 10rpx 20rpx;
		border-radius: 5rpx;
		background-color: #eeeeee;
	}

	.add-collect {
		position: fixed;
		width: 100%;
		height: 80rpx;
		background-color: red;
		z-index: 20000;

		.operation {
			position: absolute;
			width: 250rpx;
			top: 80rpx;
			right: 20rpx;
			background-color: #ffffff;
			border: 1rpx solid #eeeeee;

			.operation-list {
				padding: 20rpx 30rpx;
				border-bottom: 1rpx solid #eeeeee;
			}
		}
	}

	.operation-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: center;
		height: 120rpx;
		border-top: 1rpx solid #EEEEEE;
		padding: 0 25rpx 10rpx 25rpx;

		.operation-btnl {
			width: 120rpx;
			height: 50rpx;
			text-align: center;
			border-radius: 25rpx;
			line-height: 50rpx;
			border: 1rpx solid #9b9b9b;
			margin-right: 20rpx;
		}

		.operation-btnr {
			width: 120rpx;
			height: 50rpx;
			text-align: center;
			border-radius: 25rpx;
			line-height: 50rpx;
			background-color: #007AFF;
			color: #FFFFFF;
		}
	}

	.edit-name {
		width: 100%;
		border: 1rpx solid #E4E9EC;
		height: 60rpx;
		border-radius: 10rpx;
		padding: 0 10rpx;
	}

	.edit-submit {
		width: 100%;
		height: 60rpx;
		text-align: center;
		border-radius: 25rpx;
		line-height: 60rpx;
		background-color: #007AFF;
		color: #FFFFFF;
		margin: 20rpx auto 0;
	}

	.move-top {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 20rpx;

		.closeMove {
			width: 50rpx;
			height: 50rpx;
			font-size: 40rpx;
			flex: 0 0 50rpx;
		}

		.move-content {
			text-align: center;
			flex: 1;
		}

		.moveAdd {
			color: #007AFF;
			width: 120rpx;
			flex: 0 0 120rpx;
			text-align: center;
		}
	}
</style>
